<template>
	<div class="page">
		<div class="add">
			<el-button plain style=" background-color: slateblue; color: white;" v-on:click="insert()">
				添加
			</el-button>
		</div>
		<div class="workspace">
			<el-tabs type="border-card" v-model="day" @tab-click="updateList(day)">
				<el-tab-pane v-for="day in weekday" :label="day.title">
					<div class="childbody">
						<div class="title">
							<div class="text">早餐</div>
						</div>
						<div class="content">
							<div class="model" v-for="item in form" v-if="item.providedTime=='1'">
								<div class="formbody">
								<img :src='"../../img/"+item.picture+".jpg"' style="height: 100px; width: 100px;"/>
								<img src="../../img/笔.png" style="height: 17px; width: 17px;" v-on:click="handleEdit(item.foodId)"/>
								<img src="../../img/叉.png" style="height: 17px; width: 17px;" v-on:click="deleteById(item.foodId)"/>
								</div>
								<div class="label" v-if="classchange(item.foodTaily)">
									{{item.foodTaily}}
								</div>
								<div v-else class="blue">
									{{item.foodTaily}}
								</div>
								<div>
									类别:{{item.foodType}}
								</div>
								<div>
									名称:{{item.foodName}}
								</div>
								<div>价格:{{item.foodPrice}}</div>
								<div>是否清真:{{item.status}}</div>
							</div>
						</div>
					</div>
					<div class="childbody">
						<div class="title">
							<div class="text">午餐</div>
						</div>
						<div class="content">
							<div class="model" v-for="item in form" v-if="item.providedTime==2">
								<div class="formbody">
									<img :src='"../../img/"+item.picture+".jpg"' style="height: 100px; width: 100px;"/>
									
									<img src="../../img/笔.png" style="height: 17px; width: 17px;" v-on:click="handleEdit(item.foodId)"/>
									<img src="../../img/叉.png" style="height: 17px; width: 17px;" v-on:click="deleteById(item.foodId)"/>
								</div>
								<div class="label" v-if="classchange(item.foodTaily)">
									{{item.foodTaily}}
								</div>
								<div v-else class="blue">
									{{item.foodTaily}}
								</div>
								<div>
									类别:{{item.foodType}}
								</div>
								<div>
									名称:{{item.foodName}}
								</div>
								<div>价格:{{item.foodPrice}}</div>
								<div>是否清真:{{item.status}}</div>
							</div>
						</div>
					</div>
					<div class="childbody">
						<div class="title">
							<div class="text">晚餐</div>
						</div>
						<div class="content">
							<div class="model" v-for="item in form" v-if="item.providedTime==3">
								<div class="formbody">
									<img :src='"../../img/"+item.picture+".jpg"' style="height: 100px; width: 100px;"/>
									<img src="../../img/笔.png" style="height: 17px; width: 17px;" v-on:click="handleEdit(item.foodId)"/>
									<img src="../../img/叉.png" style="height: 17px; width: 17px;" v-on:click="deleteById(item.foodId)"/>	
								</div>
								<div v-if="classchange(item.foodTaily)" class="label">
									{{item.foodTaily}}
								</div>
								<div v-else class="blue">
									{{item.foodTaily}}
								</div>
								<div>
									类别:{{item.foodType}}
								</div>
								<div>
									名称:{{item.foodName}}
								</div>
								<div>价格:{{item.foodPrice}}</div>
								<div>是否清真:{{item.status}}</div>
							</div>
						</div>
						
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
		<el-dialog :title="title" :visible.sync="show" :close-on-click-modal="false" width="1000px">
			<MealsMenologyEdit v-if="show" :show.sync="show" @getData="getData()" :editid="editid"></MealsMenologyEdit>
		</el-dialog>
	</div>
</template>

<script>
	import MealsMenologyEdit from '@/views/meals_menology/edit'
	export default {
		name: 'MealsMenology',
		data() {
			return {
				day: "0",
				total: 10,
				show: false,
				editid: null,
				title: '',
				weekday: [{
					title: "周一",
				}, {
					title: "周二",
				}, {
					title: "周三",
				}, {
					title: "周四",
				}, {
					title: "周五",
				}, {
					title: "周六",
				}, {
					title: "周日",
				}, ],
				form: []
			}
		},
		methods: {
			updateList(id) {
				this.list(id);
			},
			list(day) {
				this.axios.get('/mealsMenology/list?day=' + day, eq => {
					this.form = eq.obj;
				});
			},
			classchange(taily) {
				return taily.indexOf("盐")!=-1;
			},
			insert(){
				this.title="新增";
				this.editid = null;
				this.show = true;
			},
			handleEdit(id) {
				this.title="修改";
				this.editid = id;
				this.show = true;
			},
			getData(){
				this.list(this.day);
			},
			deleteById(foodId) {
				this.axios.del('/mealsMenology/delete?foodId=' + foodId, eq => {
					if (eq.obj) {
						this.$message({
							message: "删除成功",
							type: 'success'
						});
					} else {
						this.$message({
							message: '删除失败',
							type: 'error'
						});
					}
					this.list(this.day);
				})
			}
		},
		created() {
			this.list(this.day)
		},
		components: {
			MealsMenologyEdit
		}


	}
</script>

<style scoped>
	.page {
		color: black;
		display: block;
	}
	.workspace{
		width: 100%;
	}
	.add {
		border-bottom: 1px solid darkgray;
		padding-bottom: 15px;
		margin-bottom: 20px;
	}

	.childbody {
		display: flex;
		box-shadow: 7px 6px 5px lightgray;
		margin: 10px 0px;
	}
	.content{
		display: flex;
	}
	.text {
		line-height: 40px;
		font-weight: bold;
		font-size: 18px;
		width: 12px;
		margin: 50px auto;
		height: 100px;
	}

   .childbody .title {
		background-color: slateblue;
		color: white;
		
		text-align: center;
		width: 10%;
	}

	.model {
		margin: 12px 10px;
		padding: 0px 5px;
		box-shadow: 7px 6px 5px lightgray;
		position: relative;
	}

	.model .label {
		position: absolute;
		background-color: red;
		font-size: 12px;
		color: white;
		top: 0;
		left: 0;
	}

	.model .blue {
		position: absolute;
		background-color: blue;
		font-size: 12px;
		color: white;
		top: 0;
		left: 0;
	}
</style>
